<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">分页</h5>
			</div>
			<div class="card-body">
				<ul class="pagination">
					<li class="page-item disabled">
						<a class="page-link" href="#">上一页</a>
					</li>
					<li class="page-item active">
						<a class="page-link" href="#">1</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">2</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">3</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">下一页</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">面包屑导航</h5>
			</div>
			<div class="card-body">
				<ul class="breadcrumb">
					<li class="breadcrumb-item">
						<a href="#">Photos</a>
					</li>
					<li class="breadcrumb-item">
						<a href="#">Summer 2017</a>
					</li>
					<li class="breadcrumb-item">
						<a href="#">Italy</a>
					</li>
					<li class="breadcrumb-item active">Rome</li>
				</ul>
			</div>
		</div>
	</section>
</body>

</html>